<!-- <p class="lead">
  Defined users ({{$ctrl.users.length}})
  <a class="btn btn-primary pull-right" href ng-click="$ctrl.openModal('create', {})"><i class="fa fa-plus"></i> Add user</a>
</p> -->

<div class="row" ng-if="$ctrl.users.length === 0">
  <div class="col-md-12">
    <div class="empty-message">No users defined.</div>
  </div>
</div>

<div class="row" ng-if="$ctrl.users.length > 0">
  <div class="col-sm-12 flex-table">        
    <div class="flex-header media">
      <div class="flex-col flex-w-100 text-center">Status</div>
      <div class="flex-col flex-1">User details</div>
      <div class="flex-col flex-2"></div>
      <div class="flex-col flex-1">Password</div>
      <div class="flex-col flex-2">API Key</div>
      <div class="flex-col flex-w-100"></div>
      <div class="flex-col flex-w-100"></div>
    </div>
    <div class="flex-row media" ng-repeat="user in $ctrl.users track by user.id">
      <div class="flex-col flex-w-100 text-center vertical centered">
        <span class="label label-default label-lg" ng-class="{'Ok': 'label-success', 'Locked': 'label-danger'}[user.status]">{{user.status === 'Ok' ? 'Active' : user.status}}</span>
      </div>
      <div class="flex-col flex-1">          
        <h4 class="media-heading">
          <small class="mr-xxs">
            <strong>Login:</strong> {{user.id}}</small>
        </h4>
        <h4 class="media-heading" ng-if="!$ctrl.orgId">
          <small class="mr-xxs">
            <strong>Organization:</strong> {{user.organization}}</small>
        </h4>
      </div>
      <div class="flex-col flex-2">
        <h4 class="media-heading">
          <small class="mr-xxs">
            <strong>Full name:</strong> {{user.name}}</small>
          <!-- <span class="mr-m text-primary">{{user.name}}</span> -->
        </h4>
        <h4 class="media-heading">
          <small class="mr-xxs">
            <strong>Roles:</strong> {{user.roles.join(', ') || 'None'}}</small>                        
        </h4>          
      </div>      
      <div class="flex-col flex-1 vertical">
        <!-- <span ng-if="canSetPass === true"> -->
        <span>
          <span class="btn btn-sm btn-default" ng-class="{ 'Locked':'disabled', 'Ok':''}[user.status]" ng-click="$ctrl.showPassword(user, true)"
            ng-hide="$ctrl.showPwdForm[user.id]">{{user.hasPassword ? 'Edit password' : 'New password'}}</span>
          <form ng-show="$ctrl.showPwdForm[user.id]" ng-submit="$ctrl.setPassword(user, newValue); $ctrl.showPassword(user, false);">
            <div class="input-group input-group-sm">
              <input auto-focus="user-showPassword-{{user.id}}" class="form-control input-sm" ng-model="newValue" type="password">
              <span class="input-group-btn">
                <button class="btn btn-default" type="button" ng-click="$ctrl.showPassword(user, false)">
                  <i class="fa fa-times text-danger"></i>
                </button>
              </span>
            </div>
          </form>
        </span>
      </div>
      <div class="flex-col flex-2 vertical">
        <span ng-if="!user.hasKey">
          <span class="btn btn-sm btn-default" ng-class="{'Locked':'disabled'}[user.status]" ng-click="$ctrl.createKey(user)">Create API Key</span>
        </span>
        <span ng-if="user.hasKey">            
          <div class="input-group input-group-sm">              
            <span class="input-group-btn">
              <span class="btn btn-sm btn-default" ng-class="{'Locked':'disabled'}[user.status]" ng-click="$ctrl.createKey(user)">Renew</span>
              <span class="btn btn-sm btn-danger" ng-class="{'Locked':'disabled'}[user.status]" ng-click="$ctrl.revokeKey(user)">Revoke</span>
              <span class="btn btn-sm btn-primary" ng-class="{'Locked':'disabled'}[user.status]" ng-click="$ctrl.getKey(user)" ng-if="!$ctrl.userKeyCache[user.id]">Reveal</span>
            </span>
            <input class="form-control" readonly ng-model="$ctrl.userKeyCache[user.id]" ng-if="$ctrl.userKeyCache[user.id]">
            <span class="input-group-btn" ng-if="$ctrl.userKeyCache[user.id]">
              <button class="btn btn-primary" type="button" ng-click="$ctrl.copyKey(user)">
                <i class="fa fa-copy"></i>
              </button>
            </span>
          </div>
        </span>
        </td>
      </div>
      <div class="flex-col flex-icon flex-w-100" ng-click="$ctrl.openModal('edit', user)">
        <a href class="text-primary">
          <i class="fa fa-edit"></i>Edit</a>
      </div>
      <div class="flex-col flex-icon flex-w-100" ng-if="user.status === 'Ok'" ng-click="$ctrl.lockUser(user.id)">
        <a href class="text-danger" ng-if="user.id !== $ctrl.main.currentUser.id">
          <i class="fa fa-ban"></i>Lock</a>
      </div>
      <div class="flex-col flex-icon flex-w-100" ng-if="user.status === 'Locked'" ng-click="$ctrl.unlockUser(user.id)">
        <a href class="text-success" ng-if="user.id !== $ctrl.main.currentUser.id">
          <i class="fa fa-refresh"></i>Unlock</a>
      </div>
    </div>
  </div>
</div>